@()(implicit session: Session)
@english.home.main("Mitochondria Genome") {

    <style>



            .pull-left .search input{
                height:30px;
            }



    </style>

    <hgroup class="page-head">
        <h2>
            Genome <span>Browser</span>
        </h2>
    </hgroup>


    <div id="container" class="clearfix">
        <div id="content" class="full-width">
            <div class="tabs-container" style="padding: 10px">

                <div id="checkbox" class="checkbox">
                </div>

                <div id="toolbar">
                        &nbsp;
                        Keyword：
                </div>

                <table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
                data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true">

                </table>
            </div>
        </div>
    </div>

    <script>

            $(function () {


                $('#table').bootstrapTable({
                    columns: [
                        [{
                            field: "jb",
                            title: "Genome Browser",
                            align: "center",
                            halign: "center",
                            valign: "middle",
                            formatter: function (value, row) {
                                var array = row.species.split(" ");

                                return "<a href='http://210.22.121.250:20795/jb/index.html?data=my_data/PODB/" +
                                        array[0] + "_" + array[1] + "/data' target='_blank' style='color: cornflowerblue;'><i class='fa fa-chrome'></i></a>"
                            }
                        },{
                            field: "id",
                            title: "ID",
                            align: "center",
                            halign: "center",
                            valign: "middle",
                            formatter: function (value, row) {
                                return "<a href='/US/PODB/mitochondria/moreInfo?id=" + row.id + "' target='_blank' style='color: cornflowerblue;'>" + "MT0000" + row.id + "</a>";
                            }
                        },{
                            field: "species",
                            title: "Species",
                            align: "center",
                            halign: "center",
                            valign: "middle"
                        }, {
                            field: "phylum",
                            title: "Phylum",
                            align: "center",
                            halign: "center",
                            valign: "middle"
                        }, {
                            field: "class",
                            title: "Class",
                            align: "center",
                            halign: "center",
                            valign: "middle"
                        }, {
                            field: "order",
                            title: "Order",
                            align: "center",
                            halign: "center",
                            valign: "middle"
                        }, {
                            field: "family",
                            title: "Family",
                            align: "center",
                            halign: "center",
                            valign: "middle"
                        }, {
                            field: "genus",
                            title: "Genus",
                            align: "center",
                            halign: "center",
                            valign: "middle"
                        }]]

                });


                $.ajax({
                    url: "@routes.MitochondriaController.getAllMitochondria()",
                    type: "post",
                    success: function (data) {
                        $('#table').bootstrapTable("load", data);
                    }
                });

            });



    </script>


}